<template>
	<view class="evaluate-container bottom-index">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 顶部导航栏 -->
		<qmy-custom-navbar title="商品评价"></qmy-custom-navbar>

		<!-- 评价内容区域 -->
		<view class="evaluate-content" :style="{paddingTop: menuObject.top + menuObject.height + 8 + 'px'}">

			<!-- 商品评价列表 -->
			<view class="evaluate-list">
				<view class="goods-item" v-for="(item, index) in evaluateList" :key="index">
					<!-- 商品信息卡片 -->
					<view class="goods-card">
						<image class="goods-image" :src="goodsList[index].image" mode="aspectFill"></image>
						<view class="goods-info">
							<view class="goods-name text-element-2">{{goodsList[index].name}}</view>
							<view class="goods-specs">
								<text class="spec-badge" v-for="(spec, sindex) in goodsList[index].specs"
									:key="sindex">{{spec}}</text>
							</view>
							<view class="goods-price">¥{{goodsList[index].price/100}}</view>
						</view>
					</view>

					<!-- 评分区域 -->
					<view class="rating-section">
						<view class="section-title">商品评分</view>
						<view class="rating-stars">
							<view class="star-container" v-for="star in 5" :key="star" @click="setRating(index, star)">
								<text class="iconfont"
									:class="star + 1 <= item.rating ? 'ic-aixin1 col-ff4' : 'ic-aixin col-87'"></text>
							</view>
							<text class="rating-text">{{getRatingText(item.rating)}}</text>
						</view>

						<!-- 差评温馨提示 -->
						<view class="rating-tip" v-if="item.rating <= 2">
							<view class="tip-content">
								<text>亲亲，我们注意到您对此商品不太满意。我们非常重视您的购物体验，如您方便，欢迎随时联系我们的客服团队，确保您获得更满意的服务。</text>
							</view>
						</view>
					</view>

					<!-- 评价内容 -->
					<view class="comment-section">
						<view class="section-title">评价内容</view>
						<textarea class="comment-textarea" v-model="item.content" placeholder="请输入您对商品的评价，如使用感受、是否符合描述等"
							maxlength="100"></textarea>
						<view class="word-count">{{item.content.length}}/100</view>
					</view>

					<!-- 上传图片 -->
					<view class="upload-section">
						<view class="section-title">上传图片</view>
						<view class="upload-container">
							<!-- 图片上传 -->
							<uni-file-picker ref="files" v-model="item.images" return-type="array" limit="6" mode="grid"
								file-mediatype="image" :sizeType="['compressed']"
								:image-styles="{width: '160rpx', height: '160rpx',border:false,background:'#f7f7f7',borderRadius:'20rpx',lineHeight:'160rpx'}">
							</uni-file-picker>
						</view>
					</view>

					<!-- 标签选择 -->
					<view class="tags-section">
						<view class="section-title">评价标签 <text class="sub-title">(选填)</text></view>
						<view class="tags-container">
							<view v-for="(tag, tindex) in tagOptions" :key="tindex"
								:class="item.tags.includes(tag) ? 'tag-item tag-selected' : 'tag-item'"
								@click="toggleTag(index, tag)">{{tag}}</view>
						</view>
					</view>

					<!-- 匿名评价 -->
					<view class="anonymous-section">
						<view class="section-title">匿名评价</view>
						<switch :checked="item.is_anonymous" @change="(e) => toggleAnonymous(index, e)" color="#14cc60"
							style="transform:scale(0.8);" />
					</view>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submitEvaluate" class="w-100 fixed-bottom bac-col-00b">
			<view class="w-100 bg-col-00b text-ali-c">
				<view class="fs-30 col-f fw-600">提交评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuObject: uni.getMenuButtonBoundingClientRect(),
				orderId: '', // 订单ID
				dataLoaded: false,
				goodsList: [], // 商品列表
				evaluateList: [], // 多商品评价数据
				tagOptions: ['质量好', '物流快', '性价比高', '描述相符', '服务好', '包装好'],
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				// 加载订单和商品信息
				this.loadOrderDetail();
			} else {
				this.$Toast('缺少必要参数');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载订单详情
			loadOrderDetail() {
				this.$Route('get-private-data', true).getOrderDetail(this.orderId).then(res => {
					const orderInfo = res.data[0];
					if (!orderInfo || !orderInfo.custom || !orderInfo.custom.goods_list || orderInfo.custom
						.goods_list.length === 0) {
						this.$Toast('订单信息不完整');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
						return;
					}

					// 支持多商品评价
					const goodsList = orderInfo.custom.goods_list.map(item => ({
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						name: item.goods_name || item.name,
						image: item.goods_image || item.image,
						price: item.price,
						specs: item.specs || []
					}));

					this.goodsList = goodsList;

					// 初始化每个商品的评价数据
					this.evaluateList = goodsList.map(item => ({
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						content: '',
						rating: 5,
						images: [],
						tags: [],
						is_anonymous: false,
						specs: item.specs,
						goods_snapshot: {
							name: item.name,
							image: item.image,
							price: item.price
						}
					}));

					this.dataLoaded = true;
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);

					if (code === 401) {
						setTimeout(() => {
							this.$NavigateTo('/qmy_user/login');
						}, 1500);
					} else {
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				});
			},

			// 设置评分
			setRating(index, star) {
				this.evaluateList[index].rating = star + 1;
			},

			// 获取评分对应的文字
			getRatingText(rating) {
				const texts = ['', '差评', '不满意', '一般', '满意', '非常满意'];
				return texts[rating] || '非常满意';
			},

			// 切换标签选择
			toggleTag(index, tag) {
				const currentTags = this.evaluateList[index].tags;
				const tagIndex = currentTags.indexOf(tag);

				if (tagIndex === -1) {
					// 最多选5个标签
					if (currentTags.length >= 5) {
						this.$Toast('最多选择5个标签');
						return;
					}
					currentTags.push(tag);
				} else {
					currentTags.splice(tagIndex, 1);
				}
			},

			// 切换匿名评价
			toggleAnonymous(index, e) {
				this.evaluateList[index].is_anonymous = e.detail.value;
			},

			// 提交评价
			submitEvaluate() {
				// 验证所有商品的评价内容
				for (let i = 0; i < this.evaluateList.length; i++) {
					const evaluate = this.evaluateList[i];
					if (!evaluate.content.trim()) {
						this.$Toast(`请填写第${i+1}个商品的评价内容`);
						// 滚动到相应位置
						uni.pageScrollTo({
							selector: '.goods-item',
							offsetTop: i * 50, // 大致估计偏移量
							duration: 300
						});
						return;
					}
				}

				// 为每个评价数据添加订单ID
				const evaluateData = this.evaluateList.map(item => ({
					...item,
					order_id: this.orderId
				}));

				// 调用评价接口
				this.$Route('add-private-data').addGoodsEvaluate(evaluateData).then(res => {
					this.$Toast(res.msg);
					// 返回上一页
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshData', {});
					setTimeout(() => {
						this.$NavigateBack();
					}, 1000);
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
				});
			}
		}
	}
</script>

<style lang="scss">
	.evaluate-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.evaluate-content {
		padding: 0rpx 30rpx;
	}

	.evaluate-list {
		width: 100%;
		padding-top: 30rpx;
	}

	.goods-item {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.divider {
		height: 20rpx;
		background-color: #f5f5f5;
		margin: 40rpx -30rpx 30rpx;
	}

	.goods-card {
		display: flex;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.goods-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			flex-shrink: 0;
			background-color: #f9f9f9;
		}

		.goods-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.goods-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				line-height: 1.4;
			}

			.goods-specs {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.spec-badge {
					background-color: #f7f7f7;
					color: #888;
					font-size: 22rpx;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.goods-price {
				font-size: 32rpx;
				color: #FF3B30;
				font-weight: bold;
			}
		}
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			width: 6rpx;
			height: 24rpx;
			background-color: #14cc60;
			margin-right: 10rpx;
			border-radius: 6rpx;
		}

		.sub-title {
			font-size: 24rpx;
			font-weight: normal;
			color: #999;
			margin-left: 10rpx;
		}
	}

	.rating-section,
	.comment-section,
	.upload-section,
	.tags-section,
	.anonymous-section {
		margin-bottom: 30rpx;
	}

	.rating-stars {
		display: flex;
		align-items: center;

		.star-container {

			.iconfont {
				font-size: 40rpx;
			}

			.col-ff4 {
				color: #FF3B30;
			}

			.col-87 {
				color: #CCCCCC;
			}
		}

		.rating-text {
			font-size: 28rpx;
			color: #666;
			margin-left: 20rpx;
		}
	}

	.comment-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}

	.word-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.word-count-warning {
		color: #FF3B30;
	}

	.upload-container {
		display: flex;
		flex-wrap: wrap;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;

		.tag-item {
			background-color: #f8f8f8;
			color: #666;
			font-size: 24rpx;
			padding: 12rpx 24rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			transition: all 0.3s;
		}

		.tag-selected {
			background-color: rgba(20, 204, 96, 0.1);
			color: #14cc60;
			border: 1rpx solid #14cc60;
		}
	}

	.anonymous-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rating-tip {
		background-color: #14cc601c;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: flex-start;

		.tip-content {
			flex: 1;
			font-size: 24rpx;
			color: #666;
			line-height: 1.5;
		}
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 9999;
		transition: background-color 0.2s ease;
	}

	.fixed-bottom:active {
		background-color: #11b051 !important;
		/* 点击时背景颜色变化 */
	}
</style>